<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./lib/bootstrap.css">
  <script src="./lib/jquery.js"></script>
</head>

<body>
  <!-- 文件选择框 -->
  <input type="file" id="file1">
  <button id="btnUpload">上传文件</button>

  <!-- bootstrap中的进度条 -->
  <div class="progress" style="width: 500px; margin: 15px 10px;">
    <div class="progress-bar progress-bar-striped active" style="width: 0%" id="percent">
      0%
    </div>
  </div>
  <br />
  <img src="" alt="" id="img" width="800">

  <script>
    //1.获取文件上传按钮
    var btnUpload = document.querySelector('#btnUpload')
    //2.为文件绑定单击事件处理函数
    btnUpload.addEventListener('click', function () {
      // 3.获取到用户选择的文件列表
      var files = document.querySelector('#file1').files
      if (files.length <= 0) {
        return alert('请选择上选的文件')
      }
      var fd = new FormData()
      // 将用户选择的文件，添加到FormData中
      fd.append('avatar', files[0])

      var xhr = new XMLHttpRequest()

      // 监听文件上传进度
      xhr.upload.onprogress = function (e) {
        // e.lengthComputable 表示是否可以计算文件 上传进度
        if (e.lengthComputable) {
          // e.loaded已经上传大小
          // e.total 总大小
          var procentComplete = Math.ceil((e.loaded / e.total) * 100)
          console.log(procentComplete);
          // 动态设置进度条
          $('#percent').attr('style', 'width:' + procentComplete + '%').html(procentComplete + '%')
        }
      }
      // 设置进度条上传完成以后的样式
      xhr.upload.onload = function () {
        $('#percent').removeClass().addClass('progress-bar progress-bar-success ')
      }

      xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
      xhr.send(fd)

      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          var data = JSON.parse(xhr.responseText)
          if (data.status === 200) {
            // 上传成功
            document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
          } else {
            // 上传失败
            console.log(data.message);
          }
        }
      }
    })
  </script>
</body>

</html>